<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header/>
        <div class="content Gwidth">
            <Breadcrumb separator=">">
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem to="/factory">某某家具</BreadcrumbItem>
                <BreadcrumbItem>产品中心</BreadcrumbItem>
            </Breadcrumb>
            <div class="main">
                <div class="item">
                    <nuxt-link to="/factory/case/detail">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                    </nuxt-link>
                </div>
                <div class="item">
                    <nuxt-link to="/factory/case/detail">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                    </nuxt-link>
                </div>
                <div class="item">
                    <nuxt-link to="/factory/case/detail">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                    </nuxt-link>
                </div>
                <div class="item">
                    <nuxt-link to="/factory/case/detail">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                    </nuxt-link>
                </div>
                <div class="item">
                    <nuxt-link to="/factory/case/detail">
                        <div class="img">
                            <img src="" alt="">
                        </div>
                        <h1>精品老板椅沙发椅</h1>
                    </nuxt-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
export default {
    components: {
		Header,
		Sidebar,
	},
    data(){
        return{
            
            
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address'])
	},
    mounted(){
        
    },
    methods:{
        
    },
}
</script>
<style scoped>
    .content{
        padding: 30px 0;
    }
    
    .content .main{
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;
    }
    .content .main .item{
        margin-right: 34px;
        margin-bottom: 50px;
        width: 274px;
    }
    .content .main .item .img,.content .main .item .img img{
        width: 100%;
        height: 210px;
        border-radius: 4px 4px 0 0;
    }
    .content .main .item h1{
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 16px;
        margin-top: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .content .main .item:nth-child(4n){
        margin-right: 0;
    }

</style>
